<!DOCTYPE html> 
<html> 
<head> 
	<title>Postillon Newsticker</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

	<script type="text/javascript">
<!--

function Ticker( container, pauseResumeButton ) {

	var container = container;
	var pauseResumeButton = pauseResumeButton;
	this.news = new Array();
	var actPosition = 0;
	this.scrolling = false;
	
	//container.hide();
	
	this.loadData = function() {
	
		//get the JSON data from the Twitter search API
		$.getJSON("http://search.twitter.com/search.json?q=-RT%20%23newstweet%20%40Der_Postillon&amp;src=hash&amp;rpp=100&amp;callback=?", function(data)
		{
			//loop the tweets
			$(data.results).each(function(i,v)
			{
				if(this.text.match(/\+\+\+.*?\+\+\+/)) {
					ticker.news.push(this.text.match(/\+\+\+.*?\+\+\+/));
				}
			});
			ticker.autoNext();
			ticker.startScrolling();
		});
	}

	this.autoNext = function() {
		// check that there are news to display
		if(this.news.length == 0) return;
		// if the last news has been reached, go to the first news
		if(actPosition >= this.news.length) actPosition = 0;
		this.displayNews(actPosition, 2000);
		actPosition++;
	}
	
	this.next = function() {
		// check that there are news to display
		if(this.news.length == 0) return;
		// if the last news has been reached, go to the first news
		if(actPosition >= this.news.length) actPosition = 0;

		this.stopScrolling();
		this.displayNews(actPosition, 250);
		actPosition++;
	}
	
	this.previous = function() {
		// check that there are news to display
		if(this.news.length == 0) return;
		// if the first news has been reached, go to the last news
		if(actPosition == 0) actPosition = this.news.length - 1;
		
		this.stopScrolling();
		actPosition--;
		this.displayNews(actPosition, 250);
	}
	
	this.displayNews = function(pos, fadeDuration) {
		$(container).fadeOut(fadeDuration, function() {
			$(this).html(ticker.news[pos]);
			$(this).fadeIn(fadeDuration, function() {});
		});
	}
	
	this.stopScrolling = function() {
		window.clearInterval(this.scrolling);
		this.scrolling = false;
		
		// update ui
		$(pauseResumeButton).val('resume').button("refresh");
		$(pauseResumeButton).button("refresh");
	}
	
	this.startScrolling = function() {
		this.scrolling = window.setInterval("ticker.autoNext()",10000);
		
		// update ui
		$(pauseResumeButton).val('pause').button("refresh");
		$(pauseResumeButton).button("refresh");	
	}
	
	this.pauseOrResume = function() {
		if(this.scrolling == false) {
			// is paused, so resume
			this.startScrolling();
		} else {
			// is scrolling, so pause
			this.stopScrolling();	
		}
	}
}


var ticker = new Ticker("#tickerline", "#pauseOrResume");

$(document).bind('pageinit', function() {
	
	ticker.loadData();


	$('#tickerline').live('swipeleft',function(event){
		alert('This page was swiped left');
		return false;
	});
	$('tickerline').live('swiperight',function(event){
		alert('This page was swiped right');
		return false;
	});
	
	
	$('tickerline').live('tap',function(event){
		alert('This page was taped');
		return false;
	});
	
	
	$('tickerline').bind('tap',function(event){
		alert('This page was taped with bind');
		return false;
	});
	
	
	$('tickerline').bind('pagecreate',function(event){
		alert('page created');
		return false;
	});
	
});

//-->
</script>
	
	</head> 
<body> 

<div data-role="page" data-theme="b" >

	<div data-role="header">
		<h1>Postillon Newsticker</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<h2 id="tickerline" style="text-align: center;"></h2>		
	</div><!-- /content -->
	<div data-role="footer" style="text-align: center" data-position="fixed" data-fullscreen="true">
		<input type="button" onClick="ticker.previous();" data-icon="arrow-l" data-iconpos="notext" value="previous" />
		<input type="button" id="pauseOrResume" onClick="ticker.pauseOrResume();" value="pause" />
		<input type="button" onClick="ticker.next();"data-icon="arrow-r" data-iconpos="notext" value="next" />
	</div>

</div><!-- /page -->

</body>
</html>